﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>商品列表</title>
    <meta name="robots" content="noindex, follow"/>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="../../assets/img/favicon.ico">

    <link rel="stylesheet" href="../../assets/css/vendor/bootstrap.min.css">
    <!-- Font-awesome CSS -->
    <link rel="stylesheet" href="../../assets/css/vendor/font-awesome.min.css">
    <!-- Slick slider css -->
    <link rel="stylesheet" href="../../assets/css/plugins/slick.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="../../assets/css/plugins/animate.css">
    <!-- Nice Select css -->
    <link rel="stylesheet" href="../../assets/css/plugins/nice-select.css">
    <!-- jquery UI css -->
    <link rel="stylesheet" href="../../assets/css/plugins/jqueryui.min.css">
    <!-- main style css -->
    <link rel="stylesheet" href="../../assets/css/style.css">

    <script src="../../assets/js/plugins/utils.js"></script>

    <script src="../../assets/js/vendor/axios.min.js"></script>

    <script src="../../assets/js/vendor/vue.min.js"></script>



</head>

<body>
<!-- Start Header Area -->
<header class="header-area" id="header"></header>
<!-- end Header Area -->



<main>
    <!-- breadcrumb area start -->
    <div class="breadcrumb-area breadcrumb-img bg-img" data-bg="../../assets/img/banner/shop.jpg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-wrap">
                        <nav aria-label="breadcrumb">
                            <h3 class="breadcrumb-title">商品列表</h3>
                            <ul class="breadcrumb justify-content-center">
                                <li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
                                <li class="breadcrumb-item active" aria-current="page">商品列表</li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb area end -->

    <!-- page main wrapper start -->
    <div class="shop-main-wrapper section-padding">
        <div class="container">
            <div class="row">
                <!-- sidebar area start -->
                <div class="col-lg-3 order-2 order-lg-1" id="category">
                    <aside class="sidebar-wrapper">
                        <!-- single sidebar start -->
                        <div class="sidebar-single">
                            <h6 class="sidebar-title">分类</h6>
                            <div class="sidebar-body">
                                <ul class="checkbox-container search-list">
                                    <li v-for="category in categories" v-if="category.flag==1">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" :id="step(category.id)"
                                                   :value="category.id" v-model="checkedNames" @change="toProductList">
                                            <label class="custom-control-label" :for="step(category.id)">{{category.name}}
                                                ({{category.count}})</label>
                                        </div>
                                    </li>

                                </ul>
                            </div>
                        </div>
                        <!-- single sidebar end -->

                        <!-- single sidebar start -->
                        <div class="sidebar-single">
                            <h6 class="sidebar-title">品牌</h6>
                            <div class="sidebar-body">
                                <ul class="checkbox-container search-list">
                                    <li v-for="category in categories" v-if="category.flag==2">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" :id="step(category.id)"
                                                   :value="category.id" v-model="checkedNames" @change="toProductList">
                                            <label class="custom-control-label" :for="step(category.id)">{{category.name}}
                                                ({{category.count}})</label>
                                        </div>
                                    </li>

                                </ul>
                            </div>
                        </div>
                        <!-- single sidebar end -->

                        <!-- single sidebar start -->
                        <div class="sidebar-single">
                            <h6 class="sidebar-title">价格</h6>
                            <div class="sidebar-body">
                                <ul class="radio-container search-list">
                                    <li v-for="category in categories" v-if="category.flag==3">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" :id="step(category.id)"
                                                   :value="category.id" v-model="checkedNames" @change="toProductList">
                                            <label class="custom-control-label" :for="step(category.id)">{{category.name}}
                                                ({{category.count}})</label>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- single sidebar end -->


                    </aside>
                </div>
                <!-- sidebar area end -->

                <!-- shop main wrapper start -->
                <div class="col-lg-9 order-1 order-lg-2">
                    <div class="shop-product-wrapper">
                        <!-- shop product top wrap start -->
                        <div class="shop-top-bar"  >
                            <div class="row align-items-center">
                                <div class="col-lg-7 col-md-6 order-2 order-md-1">
                                    <div class="top-bar-left">
                                        <div class="product-view-mode">
                                            <a class="active" href="#" data-target="grid-view" data-toggle="tooltip"
                                               title="网格展示"><i class="fa fa-th"></i></a>
                                            <a href="#" data-target="list-view" data-toggle="tooltip" title="列表展示"><i
                                                    class="fa fa-list"></i></a>
                                        </div>
                                        <div class="product-amount" id="count">
                                            <p>显示{{data.total}}个结果中的{{data.startRow}}–{{data.endRow}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-5 col-md-6 order-1 order-md-2" id="sort" >
                                    <div class="top-bar-right" >
                                        <div class="product-short" >
                                            <p>排序 : </p>
                                            <select v-model="sort_flag" @change="sortByValue">
                                                <option selected="selected" value="">请选择</option>
                                                <option value="1">名字（A > Z）</option>
                                                <option value="2">名字（Z > A）</option>
                                                <option value="3">价格（低 > 高）</option>
                                                <option value="4">价格（高 > 低）</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                        <!-- shop product top wrap start -->
                        <!-- product item list wrapper start -->
                        <div class="shop-product-wrap grid-view row mbn-30" id="productList">
                            <!-- product single item start -->
                            <div class="col-md-4 col-sm-6" v-for="product in data.list">
                                <!-- product grid start -->
                                <div class="product-item">
                                    <div class="product-thumb">
                                        <a :href="'product-details.html?id='+product.id">
                                            <img :src="product.pics[0].path" alt="加载失败">
                                        </a>
                                        <div class="button-group">
                                            <a href="../user/wishlist.html" data-toggle="tooltip" title="Add to Wishlist"><i class="fa fa-heart-o"></i></a>
                                            <a href="javascript:void(0);" data-toggle="modal" data-target="#quick_view" @click="productId(product.id)"><span data-toggle="tooltip" title="快速预览"><i class="fa fa-eye"></i></span></a>
                                        </div>
                                        <div class="product-label" v-if="product.new==true">
                                            <span>new</span>
                                        </div>
                                        <div class="discount-label"
                                             v-if="(product.newPrice/product.oldPrice).toFixed(1)*10<10&&(product.newPrice/product.oldPrice).toFixed(1)*10>0">
                                            <span>{{(product.newPrice/product.oldPrice).toFixed(1)*10}}折</span>
                                        </div>
                                    </div>
                                    <div class="product-content">
                                        <div class="product-caption">
                                            <h6 class="product-name">
                                                <a :href="'product-details.html?id='+product.id">{{product.name}}</a>
                                            </h6>
                                            <div class="price-box">
                                                <span class="price-old" v-if="product.oldPrice!=product.newPrice"><del>¥{{product.oldPrice}}</del></span>
                                                <span class="price-regular">¥{{product.newPrice}}</span>
                                            </div>
                                            <a class="add-to-cart" href="javascript:void(0)" @click="addCart(product.id,1)"><i class="fa fa-shopping-cart"></i></a>
                                        </div>
                                        <div class="ratings" v-if="product.averageStar==1">
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                        </div>
                                        <div class="ratings" v-else-if="product.averageStar==2">
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span ><i class="fa fa-star"></i></span>
                                        </div>
                                        <div class="ratings" v-else-if="product.averageStar==3">
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span ><i class="fa fa-star"></i></span>
                                        </div>
                                        <div class="ratings" v-else-if="product.averageStar==4">
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span class="good"><i class="fa fa-star"></i></span>
                                        </div>
                                        <div class="ratings" v-else="product.averageStar==5">
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <!-- product grid end -->

                                <!-- product list item start -->
                                <div class="product-list-item">
                                    <div class="product-thumb">
                                        <a :href="'product-details.html?id='+product.id">
                                            <img :src="product.pics[0].path" alt="加载失败">
                                        </a>
                                        <div class="button-group">
                                            <a href="../user/wishlist.html" data-toggle="tooltip"
                                               title="Add to Wishlist"><i class="fa fa-heart-o"></i></a>
                                            <a href="javascript:void(0);" data-toggle="modal" data-target="#quick_view"><span
                                                    data-toggle="tooltip" @click="productId(product.id)" title="快速预览"><i
                                                    class="fa fa-eye"></i></span></a>
                                        </div>
                                        <div class="product-label" v-if="product.new==true">
                                            <span>new</span>
                                        </div>
                                        <div class="discount-label"
                                             v-if="(product.newPrice/product.oldPrice).toFixed(1)*10<10&&(product.newPrice/product.oldPrice).toFixed(1)*10>0">
                                            <span>{{(product.newPrice/product.oldPrice).toFixed(1)*10}}折</span>
                                        </div>
                                    </div>
                                    <div class="product-content-list">
                                        <h4 class="product-name"><a :href="'product-details.html?id='+product.id">{{product.name}}</a>
                                        </h4>
                                        <div class="ratings" v-if="product.averageStar==1">
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                        </div>
                                        <div class="ratings" v-else-if="product.averageStar==2">
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span ><i class="fa fa-star"></i></span>
                                        </div>
                                        <div class="ratings" v-else-if="product.averageStar==3">
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span ><i class="fa fa-star"></i></span>
                                        </div>
                                        <div class="ratings" v-else-if="product.averageStar==4">
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span class="good"><i class="fa fa-star"></i></span>
                                        </div>
                                        <div class="ratings" v-else="product.averageStar==5">
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                        </div>
                                        <div class="price-box">
                                            <span class="price-old" v-if="product.oldPrice!=product.newPrice"><del>¥{{product.oldPrice}}</del></span>
                                            <span class="price-regular">¥{{product.newPrice}}</span>
                                        </div>
                                        <p>{{product.detail}}
                                        </p>
                                        <a href="cart.html" class="btn btn-large hover-color">添加购物车</a>
                                    </div>
                                </div>
                                <!-- product list item end -->
                            </div>
                        </div>
                        <!-- product item list wrapper end -->

                        <!-- start pagination area -->
                        <div class="paginatoin-area text-center" id="page">
                            <ul class="pagination-box">
                                <li v-if="data.hasPreviousPage!=false"><a class="previous" href="javascript:void(0)"
                                                                          @click="btnClick(data.pageNum-1)"><i
                                        class="fa fa-angle-left"></i></a></li>
                                <template v-for="index in data.navigatepageNums">
                                    <li class="active" v-if="index==data.pageNum"><a
                                            href="javascript:void(0)">{{index}}</a></li>
                                    <li v-else><a href="javascript:void(0)" @click="btnClick(index)">{{index}}</a>
                                    </li>
                                </template>
                                <li v-if="data.hasNextPage!=false"><a class="next" href="javascript:void(0)"
                                                                      @click="btnClick(data.pageNum+1)"><i
                                        class="fa fa-angle-right"></i></a></li>
                            </ul>
                        </div>
                        <!-- end pagination area -->
                    </div>
                </div>
                <!-- shop main wrapper end -->
            </div>
        </div>
    </div>
    <!-- page main wrapper end -->
</main>

<!-- Scroll to top start -->
<div class="scroll-top not-visible">
    <i class="fa fa-angle-up"></i>
</div>
<!-- Scroll to Top End -->


<!-- footer area start -->
<footer class="black-bg" id="footer">
</footer>
<!-- footer area end -->


<!-- Quick view modal start -->
<div class="modal" id="quick_view">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" @click="removeHtml">&times;</button>
            </div>
            <div class="modal-body">
                <!-- product details inner end -->
                <div class="product-details-inner" >
                    <div class="row">
                        <div class="col-lg-5" id="imgFormat"></div>
                        <div class="col-lg-7">
                            <div class="product-details-des">
                                <h3 class="product-name">{{product.name}}</h3>
                                <div class="ratings d-flex" v-if="product.averageStar==1">
                                    <span style="color: red"><i class="fa fa-star"></i></span>
                                    <span><i class="fa fa-star"></i></span>
                                    <span><i class="fa fa-star"></i></span>
                                    <span><i class="fa fa-star"></i></span>
                                    <span><i class="fa fa-star"></i></span>
                                </div>
                                <div class="ratings d-flex" v-else-if="product.averageStar==2">
                                    <span style="color:red"><i class="fa fa-star"></i></span>
                                    <span style="color:red"><i class="fa fa-star"></i></span>
                                    <span><i class="fa fa-star"></i></span>
                                    <span><i class="fa fa-star"></i></span>
                                    <span><i class="fa fa-star"></i></span>
                                </div>
                                <div class="ratings d-flex" v-else-if="product.averageStar==3">
                                    <span style="color:red"><i class="fa fa-star"></i></span>
                                    <span style="color:red"><i class="fa fa-star"></i></span>
                                    <span style="color:red"><i class="fa fa-star"></i></span>
                                    <span><i class="fa fa-star"></i></span>
                                    <span><i class="fa fa-star"></i></span>
                                </div>
                                <div class="ratings d-flex" v-else-if="product.averageStar==4">
                                    <span style="color:red"><i class="fa fa-star"></i></span>
                                    <span style="color:red"><i class="fa fa-star"></i></span>
                                    <span style="color:red"><i class="fa fa-star"></i></span>
                                    <span style="color:red"><i class="fa fa-star"></i></span>
                                    <span><i class="fa fa-star"></i></span>
                                </div>
                                <div class="ratings d-flex" v-else="product.averageStar==5">
                                    <span style="color:red"><i class="fa fa-star"></i></span>
                                    <span style="color:red"><i class="fa fa-star"></i></span>
                                    <span style="color:red"><i class="fa fa-star"></i></span>
                                    <span style="color:red"><i class="fa fa-star"></i></span>
                                    <span style="color:red"><i class="fa fa-star"></i></span>
                                </div>
                                <div class="price-box">
                                    <span class="price-old"  v-if="product.oldPrice!=product.newPrice" ><del>¥{{product.oldPrice}}</del></span>
                                    <span class="price-regular">¥{{product.newPrice}}</span>
                                </div>
                                <div class="availability">
                                    <i class="fa fa-check-circle"></i>
                                    <span>库存：{{product.stock}}</span>
                                </div>
                                <p class="pro-desc">商品简介：{{product.briefIntro}}</p>
                                <div class="quantity-cart-box d-flex align-items-center">
                                    <h6 class="option-title">数量：</h6>
                                    <div class="quantity">
                                        <div class="pro-qty"><input type="text" value="1" id="product_num"></div>
                                    </div>
                                    <div class="action_link">
                                        <a class="btn btn-cart2" href="javascript:void(0)" @click="add_cart(product.id)">添加购物车</a>
                                    </div>
                                </div>
                                <div class="like-icon">
                                    <a class="facebook" href="#"><i class="fa fa-facebook"></i>like</a>
                                    <a class="twitter" href="#"><i class="fa fa-twitter"></i>tweet</a>
                                    <a class="pinterest" href="#"><i class="fa fa-pinterest"></i>save</a>
                                    <a class="google" href="#"><i class="fa fa-google-plus"></i>share</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> <!-- product details inner end -->
            </div>
        </div>
    </div>
</div>
<!-- Quick view modal end -->

<!-- JS
============================================ -->
<!-- jQuery JS -->
<script src="../../assets/js/vendor/jquery-3.3.1.min.js"></script>
<script src="../../assets/js/product/product.js"></script>
<!-- Modernizer JS -->
<script src="../../assets/js/vendor/modernizr-3.6.0.min.js"></script>

<!-- Popper JS -->
<script src="../../assets/js/vendor/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="../../assets/js/vendor/bootstrap.min.js"></script>
<!-- slick Slider JS -->
<script src="../../assets/js/plugins/slick.min.js"></script>
<!-- Countdown JS -->
<script src="../../assets/js/plugins/countdown.min.js"></script>
<!-- Nice Select JS -->
<script src="../../assets/js/plugins/nice-select.min.js"></script>
<!-- jquery UI JS -->
<script src="../../assets/js/plugins/jqueryui.min.js"></script>
<!-- Image zoom JS -->
<script src="../../assets/js/plugins/image-zoom.min.js"></script>
<!-- image loaded js -->
<script src="../../assets/js/plugins/imagesloaded.pkgd.min.js"></script>
<!-- masonry  -->
<script src="../../assets/js/plugins/masonry.pkgd.min.js"></script>
<!-- mailchimp active js -->
<script src="../../assets/js/plugins/ajaxchimp.js"></script>
<!-- contact form dynamic js -->
<script src="../../assets/js/plugins/ajax-mail.js"></script>
<!-- Main JS -->
<script src="../../assets/js/main.js"></script>

<script>
    $("#header").load("../common/header.html");
    $("#footer").load("../common/footer.html");
</script>
</body>
</html>